/**
 * 赔偿单详情
 */

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Row, Col, Button, Card, Steps, message } from 'antd';
import styles from './index.less';
import moment from 'moment';
import router from 'umi/router';

import {
  pkgOrderDetailInfo
} from './service';
import {
  Const
} from '../Const';

const { Step } = Steps;
import AuthComponent from '@/components/Authorized/AuthComponent';

// 步骤条的详情描述
const DescriptionDom = props => {

  const { item } = props;

  return (
    <>
      <div>{item.auditor} <span style={{ color: item.opinion === '0' ? '#87d068' : '#000000' }}>{Const.opinionMap[item.opinion]?.text}</span></div>
      <div>{item.auditTime}</div>
    </>
  )
}

class PrivateData {
  static colArr = [
    {
      span: 16,
      itemArr: [
        { text: '', isTitle: true },
        { text: '赔偿单号：', value: 'orderId' },
        { text: '事故单号：', value: 'accidentId' },
        { text: '赔偿总价值：￥', value: 'sumMoney' },
      ]
    },
    {
      span: 4,
      itemArr: [
        { text: '' },
        { text: '审核状态' },
        { text: '', value: 'status' },
        { text: '' },
      ]
    },
    {
      span: 4,
      itemArr: [
        { text: '修改', isButton: true },
        { text: '支付状态' },
        { text: '', value: 'receiveStatus' },
        { text: '' },
      ]
    },
  ];
  static dealColArr = (item, type, paxCompensateDetailsVo, ownerType) => {
    if (item.isTitle) {
      const nameTitle = +type === 0 ? '临时赔偿单' : '结案赔偿单';
      return <span style={{ color: '#000000', fontSize: '16px' }}>{nameTitle}</span>;
    } else {
      if (item.isButton) {
        const authCode = +type === 0 ? 'changeLinShiCompensation' : 'changeJieAnCompensation';
        const isHaveAuth = AuthComponent.getAuth(Const.permissionsType.get(+ownerType) + '.' + authCode)
        if ((+paxCompensateDetailsVo?.status === 0 || +paxCompensateDetailsVo?.status === 6) && isHaveAuth) {
          return <Button type="primary" onClick={() => {
            router.push({
              pathname: Const.commonUrl + '/inPortBaggageManagement/addEditCompensation',
              state: {
                status: 'edit',
                type: +type,
                itemData: paxCompensateDetailsVo, // 旅客信息
                detailData: paxCompensateDetailsVo, // 赔偿单信息
                ownerType: ownerType
              }
            });
          }}>{item.text}</Button>;
        }
      } else {
        if (item.value) {
          if (item.value === 'status') {
            return Const.statusMap[paxCompensateDetailsVo[item.value]]?.text || '-';
          }
          if (item.value === 'receiveStatus') {
            return Const.receiveStatusMap[+paxCompensateDetailsVo[item.value]]?.text || '-';
          }
          return item.text + (paxCompensateDetailsVo[item.value] || '');
        } else {
          return item.text;
        }
      }
    }
  };
  static stepArr = ['第一级审核人', '第二级审核人', '第三级审核人', '第四级审核人'];
  static userInfoArr = [
    { text: '旅客姓名', value: 'paxName' },
    { text: '证件类型', value: 'idType', mapData: 'idTypeMap' },
    { text: '证件号码', value: 'idNo' },
    { text: '旅客航程', value: 'segment' },
    { text: '航班号/日期', value: 'flightNo,flightDate' },
    { text: '航站', value: 'serviceCity' },
    { text: '客票号', value: 'tktNo' },
    { text: '行李牌号', value: 'pkgNo' },
    { text: '飞机号/机型', value: 'planeCode,acType' },
  ];
  static compInfoArr = [
    { text: '赔偿现金', value: 'paymentMoney', type: 0 },
    { text: '', value: '', type: 0 },
    { text: '', value: '', type: 0 },
    { text: '收款人', value: 'payee', type: 0 },
    { text: '收款人电话', value: 'payeePhone', type: 0 },
    { text: '收款金额', value: 'payeeMoney', type: 0 },
    { text: '收款账户', value: 'payeeAccount', type: 0 },
    { text: '收款银行', value: 'payeeBank', type: 0 },
    { text: '银行卡所属省份', value: 'bankCardProvince', type: 0 },
    { text: '银行卡所属地区', value: 'bankCardArea', type: 0 },
    { text: '银行卡所属地区号码', value: 'bankCardAreaNo', type: 0 },
    { text: '汇款用途', value: 'payeeUse', type: 0 },
    { text: '超重费用', value: 'overWeightPay', type: 1 },
    { text: '运输费用', value: 'transportPay', type: 1 },
    { text: '箱包尺寸', value: 'pkgSize', type: 1 },
    { text: '箱包数量', value: 'pkgCount', type: 1 },
    { text: '补偿成本', value: 'pkgPrice', type: 1 },
    { text: '备注', value: 'orderRemark', type: 1 },
    { text: '赔偿原因', value: 'paymentReason', type: 0 },
    { text: '赔偿明细', value: 'paymentDetail', type: 0 },
    { text: '', value: '', type: 0 },
    { text: '经手人', value: 'createId', type: 0 },
    { text: '批准人', value: 'auditor', type: 0 },
  ];
  static dealDetail = (item, paxCompensateDetailsVo) => {
    if (!item.text) return '';
    if (item.mapData) {
      return Const[item.mapData][paxCompensateDetailsVo[item.value]]?.text || '-';
    } else {
      let arr = item.value.split(',');
      if (arr.length === 1) {
        return paxCompensateDetailsVo[arr[0]] || '-';
      } else {
        return (paxCompensateDetailsVo[arr[0]] || '-') + '/' + (paxCompensateDetailsVo[arr[1]] || '-');
      }
    }
  };
}

const CompensationDetail = props => {

  const { location: { state: { type, orderId, ownerType } } } = props;

  const [stepCurrent, setStepCurrent] = useState(0);

  const [paxCompensateDetailsVo, setPaxCompensateDetailsVo] = useState({}); // 详情
  const [orderAuditRecordVoList, setOrderAuditRecordVoList] = useState([]); // 审核流程

  // 赔偿单详情
  const { run: runPkgOrderDetailInfo } = useRequest(params => pkgOrderDetailInfo(params), {
    manual: true,
    onSuccess (res) {
      console.log(res, '赔偿单详情')
      let data = res || {};
      setPaxCompensateDetailsVo(data.pkgOrderDetailInfoVo || {});
      setOrderAuditRecordVoList(data.orderAuditRecordVoList || []);
      setStepCurrent(data.orderAuditRecordVoList.length - 1);
    }
  });

  useEffect(() => {
    runPkgOrderDetailInfo({
      orderId
    })
  }, [orderId]);

  return (
    <div className={styles.compensationDetail}>
      <Row>
        {PrivateData.colArr.map((item, index) => (
          <Col span={item.span} className={styles.colDetailItem} key={index}>
            {item.itemArr.map((m, n) => (
              <div key={n} style={{ textAlign: item.span === 16 ? 'left' : 'center' }}>{PrivateData.dealColArr(m, type, paxCompensateDetailsVo, ownerType)}</div>
            ))}
          </Col>
        ))}
      </Row>
      <div className={styles.infoDetail}>
        <Card title="审核进度" style={{ width: '100%' }} className={styles.stepBox}>
          <Steps current={stepCurrent}>
            {/* {orderAuditRecordVoList.length !== 0 && PrivateData.stepArr.map((item, index) => (
              <Step title={item} key={index} description={stepCurrent >= index ? <DescriptionDom item={orderAuditRecordVoList[index] || {}} /> : <></>} />
            ))} */}
            {(orderAuditRecordVoList || []).map((item, index) => (
              <Step title={item.remark === '系统自动过审' ? '自动过审' : item.job} key={index} description={<DescriptionDom item={item} />} />
            ))}
          </Steps>
        </Card>
        <Card title="旅客信息" style={{ width: '100%', marginTop: '20px' }}>
          <div className={styles.infoContent}>
            {PrivateData.userInfoArr.map((item, index) => (
              <div key={index}>
                <span style={{ color: '#000000' }}>{item.text}</span>
                ：
                {PrivateData.dealDetail(item, paxCompensateDetailsVo)}
              </div>
            ))}
          </div>
        </Card>
        <Card title="赔偿信息" style={{ width: '100%' }}>
          <div className={styles.infoContent}>
            {PrivateData.compInfoArr.map((item, index) => {
              if (type >= item.type) {
                return (
                  <div key={index}>
                    <span style={{ color: '#000000' }}>{item.text ? item.text + '：' : ''}</span>
                    {PrivateData.dealDetail(item, paxCompensateDetailsVo)}
                  </div>
                )
              }
            })}
          </div>
        </Card>
      </div>
    </div>
  )
}

export default CompensationDetail;
